<style>
.text-input textarea {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    border: 1px solid #cccccc;
    border-radius: 3px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0;
    width: 100%;
    padding-left: 5px;
    padding-top: 6px;
    font-size: 18px;
    resize: none;
}

.text-input .expandingArea {
    position:relative;
    font-size: 18px;
}

.text-input pre {
    display:block;
    font-size: 18px;
    visibility:hidden;
}
</style>

<template>
    <div class="text-input">
        <div class="expandingArea ">
            <pre><span>{{model.value}}</span><br></pre>
            <textarea @input.prevent="input_change" placeholder="输入描述内容" @keydown.down="next_textarea" @keydown.up="prev_textarea" @keydown.enter="enter_input"  v-model="model.value | format_html"></textarea>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue'

    Vue.filter('format_html', {
        read (val) {
            let temp = val || '';

            temp = temp.replace(/\&nbsp;/g, ' ');
            if (temp.slice(0, 3) === '<p>' && temp.slice(temp.length - 4) == '</p>') {
                return temp.slice(3, temp.length - 4).split('</p>\n<p>').join('\n');
            }

            return val;
        },
        write (val, oldVal) {
            return val.replace(/ /g, '&nbsp;')
                      .split('\n')
                      .map(item => `<p>${item}</p>`)
                      .join('\n');
        }
    });

    export default {
        props: ['model', 'index'],
        methods: {
            enter_input: function(env) {
                if (env.shiftKey) {
                    env.preventDefault();
                    this.$dispatch('add-text', this.index);
                }
            },
            next_textarea: function(env) {
                if (env.shiftKey) {
                    env.preventDefault();
                    this.$dispatch('next-textarea', this.index);
                }
            },
            prev_textarea: function(env) {
                if (env.shiftKey) {
                    env.preventDefault();
                    this.$dispatch('prev-textarea', this.index);
                }
            },
            input_change: function(env) {
                this.$dispatch('text-input-change');
            },
        },
    }
</script>
